<template>
        <el-container class="bg-white rounded" :style="{height:(h+'px')}">
          <el-header class="image-header">
            <!-- epb按钮 -->
            <el-button type="primary" size="small" @click="handleOpenCreate">
            新增图片分类
            </el-button>

            <el-button type="warning" size="small" @click="handleOpenUpload">
            上传图片
            </el-button>

          </el-header>
          <el-container>
            <!-- 绑定才可以进行获取子组件值 -->
            <ImageAside ref="ImageAsideRef" @change="handleAsideChange"/>
            <ImageMain ref="ImageMainRef"/>
          </el-container>
        </el-container>
</template>

<script setup>
import {ref} from 'vue'
import ImageAside from '~/components/ImageAside.vue'
import ImageMain from '~/components/ImageMain.vue'
// import {
//   openUploadFile,
// } from '~/components/UploadFile.vue'
const windowHight = window.innerHeight || document.body.clientHeight
const h = windowHight-64-44-40

//获取子组件值
const ImageAsideRef = ref(null)
const handleOpenCreate = ()=>ImageAsideRef.value.handleCreate()
const ImageMainRef = ref(null)
const handleAsideChange = (image_Class_id)=>{
  ImageMainRef.value.loadData(image_Class_id)
}
const handleOpenUpload = ()=>ImageMainRef.value.openUploadFile()
</script>
<style>
.image-header{
    border-bottom: 1px solid #eeeeee;
    @apply flex items-center;
}


</style>